<template>
    <div id="body">
        <el-row>
            <div id="title" class="grayColor">新增商品(零售)</div>
        </el-row>
        <el-row>
            <div class="title_information">商品基本信息</div>
        </el-row>
        <el-row>
            <el-col :span="3" class="text_align_right">
                <span>商品名称：</span>
            </el-col>
            <el-col :span="6">
                <el-input id="goodsNameInput"
                          placeholder="请输入名称"
                          v-model="goodsName"
                          clearable>
                </el-input>
            </el-col>
            <el-col :span="3" class="text_align_right" :offset="3">
                <span>上架状态：</span>
            </el-col>
            <el-col :span="6">
                <template>
                    <el-select v-model="value" placeholder="请选择" style="width: 100%">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="3" class="text_align_right">
                <span>商品描述：</span>
            </el-col>
            <el-col :span="6">
                <el-input
                        type="textarea"
                        :rows="3"
                        placeholder="请输入内容"
                        v-model="textarea">
                </el-input>
            </el-col>

            <el-col :span="3" class="text_align_right" :offset="3">
                <span>上架状态：</span>
            </el-col>
            <el-col :span="6">
                <template>
                    <el-radio v-model="radio" label="1">线上</el-radio>
                    <el-radio v-model="radio" label="2">测试</el-radio>
                </template>
            </el-col>
        </el-row>
        <el-row>
            <div class="title_information" style="margin-top: 20px">商品图片</div>
        </el-row>
        <el-row>
            <el-col :span="3" :offset="2" class="text_align_center">
                <el-row>
                    <span>首页大图</span>
                </el-row>
                <el-upload
                        class="avatar-uploader text_align_center"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :on-change="changeIndexImg"
                        :before-upload="beforeAvatarUpload"
                        :auto-upload=false
                >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

            </el-col>
            <el-col :span="4" :offset=2>
                <el-row class="text_align_center">
                    <span>详情页大图</span>
                </el-row>

                <el-upload
                        class="avatar-uploader text_align_center"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :on-change="changeImg"
                        :before-upload="beforeAvatarUpload"
                        :auto-upload=false
                >
                    <img v-if="imageUrlXiangqing" :src="imageUrlXiangqing" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-col>

        </el-row>
        <el-row>
            <el-col :span="3" :offset="2" class="text_align_center">
                <span>正文大图</span>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="22" :offset="2">
                <el-upload
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :limit="6"
                        :auto-upload=false
                        :on-exceed="myAlert"
                        :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>

            </el-col>


        </el-row>
        <el-row>
            <div class="title_information">商品规格</div>
        </el-row>
        <el-row>
            <el-table id="myTable"
                    :data="tableData"
                    border
                    >
                <el-table-column
                        prop="cost_price"
                        label="商品原价(元)"
                        width="120"
                        align="center">
                    <template slot-scope="scope">
                        <el-input v-if="scope.row.edit" v-model="scope.row.cost_price"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="promote_price"
                                 label="促销价(元)"
                                 width="120"
                                 align="center">
                    <template slot-scope="scope">
                        <el-input v-if="scope.row.edit" v-model="scope.row.promote_price"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="商品成本价(元)"
                        align="center"
                        width="120">
                    <template slot-scope="scope">
                        <el-input v-if="scope.row.edit" v-model="scope.row.price"></el-input>
                        <span v-else>{{scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="express_price"
                        align="center"
                        label="快递价格(元)"
                        width="120">
                    <template slot-scope="scope">
                        <el-input v-if="scope.row.edit" v-model="scope.row.express_price"></el-input>
                        <span v-else>{{scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="buy_num"
                        label="购买数量限制(个/单)"
                        align="center"
                        width="180">
                    <template slot-scope="scope">
                        <el-input v-if="scope.row.edit" v-model="scope.row.buy_num"></el-input>
                        <span v-else>{{scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="stock"
                        label="商品库存(件)"
                        align="center"
                        width="120">
                    <template slot-scope="scope">
                        <el-input v-if="scope.row.edit" v-model="scope.row.stock"></el-input>
                        <span v-else>{{scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="供货商"
                        align="center"
                        width="120">
                    <template slot-scope="scope">
                        <el-input v-if="scope.row.edit" v-model="scope.row.name" @input="handleSelect"></el-input>
                        <span v-else>{{scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="call"
                        label="供货商电话"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-input v-if="scope.row.edit" v-model="scope.row.call"></el-input>
                        <span v-else>{{scope.row.name}}</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>

        <el-row class="text_align_center">

            <el-button style="padding: 20px 40px" @click="fabu">
                发布
            </el-button>
            <el-button style="padding: 20px 40px" @click="cancel">
                取消
            </el-button>

        </el-row>

    </div>

</template>

<script>
    import {mapActions} from 'vuex';
    export default {

        name: "addGoods",
        data() {
            return {
                promote_price: '',
                tableData: [],
                dialogImageUrl: '',
                dialogVisible: false,
                imageUrlXiangqing: '',
                imageUrl: '',
                img_default_div: true,
                shouyeSrc: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                radio: '1',
                textarea: '',
                goodsName: '',
                options: [{
                    value: '0',
                    label: '促销中'
                }, {
                    value: '1',
                    label: '仓库中',
                }, {
                    value: '2',
                    label: '出售中'
                }, {
                    value: '3',
                    label: '已售罄'
                }],
                value: '',
                goodsDesc: ''
            }
        },
        created() {
            this.tableData.push({
                edit: true,
            });
        },
        methods: {
            ...mapActions(['fabuGoods']),
            handleSelect(item){
                console.log(item);
            },
            fabu() {
                // this.$store.dispatch('fabuGoods')
                this.fabuGoods({
                    value:this.value,
                    goodsName: this.goodsName,
                    goodsDesc:this.goodsDesc,
                }).then(respData=>{
                    console.log(respData);
                    if (respData.data.code === 200) {
                        alert('添加成功')
                    }else{
                        alert('添加失败')
                    }

                }).catch(err=>{

                })

            },
            cancel() {
                location.href = location.href
            },
            myAlert() {
                alert('最多上传6张图片')
            },
            changeImg(file, fileList) {
                // console.log(file.url);
                // console.log(URL.createObjectURL(file.raw));
                // console.log(fileList);
                this.imageUrlXiangqing = URL.createObjectURL(file.raw);
            },

            changeIndexImg(file, fileList) {
                // console.log(file.url);
                // console.log(URL.createObjectURL(file.raw));
                // console.log(fileList);
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            handleRemove(file, fileList) {
                // console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleAvatarSuccess(res, file) {
                console.log(URL.createObjectURL(file.raw));
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                // console.log(file.type);
                // let arr = file.type.split('.') === 'image/jpeg';
                // const isJPG = arr[arr.length-1]==='jpg';
                // const isPNG = arr[arr.length-1]==='png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
        }
    }
</script>

<style lang="less" scoped>
    .avatar-uploader {
        border: 1px dashed lightgray;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        height: 148px;
        width: 148px;
    }

    .avatar-uploader:hover {
        border-color: #409EFF;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 148px;
        height: 148px;
        line-height: 148px;
        text-align: center;
    }

    .avatar {
        width: 148px;
        height: 148px;
        display: block;
    }

    .add_div {
        font-size: 26px;
        outline: 1px solid lightgray;
        text-align: center;
        height: 100px;
        line-height: 100px;
        position: absolute;
        z-index: 1;
        width: 100%;
        background-color: lightgray;
    }

    #goodsNameInput {

    }

    .text_align_center {
        text-align: center;
    }

    .el-row {
        margin-bottom: 20px;
        line-height: 40px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }


    #xinzeng_shangpinmiaoshu_span {
        vertical-align: top;
    }

    #xinzeng_information_row2 {
        padding: 0 10px;
    }

    .xinzeng_xinxiInputWidth {
        width: 300px;
        outline: none;
        height: 30px;
        /*padding: 10px;*/

    }

    #xinzeng_shangpinName {
        padding: 0 5px;
        border: none;
        outline: 1px solid gray;
    }


    #xinzeng_shangjaizhuangtai {
        border: none;
        outline: 1px solid gray;
    }

    #info_div {
        margin: 30px 10px;
    }

    .title_information {
        color: #3399FF;
        font-weight: bold;
        border-bottom: 1px solid #E4E4E4;
        padding-bottom: 10px;
    }

    #xinzeng_fabu:hover {
        background-color: blue;
    }

    #xinzeng_quxiao:hover {
        background-color: blue;
        color: white;
        border-color: blue;

    }

    #xinzeng_quxiao {
        border-radius: 5px;
        color: black;
        text-align: center;
        padding: 8px;
        width: 80px;
        border: 1px solid black;
        cursor: pointer;
        transition: all .1s linear;

    }

    .text_align_right {
        text-align: right;
    }

    #xinzeng_fabu {
        background-color: #169BD5;
        border-radius: 5px;
        color: white;
        text-align: center;
        padding: 8px;
        width: 80px;
        margin-right: 20px;
        cursor: pointer;
        transition: .1s;

    }

    #fabubt {
        margin-right: 20px;
    }

    #btn_fabuAndQuxiao {
        margin: 20px;
    }

    #body {
        /*margin: 10px;*/
        padding: 20px;
        background-color: white;
    }

    .grayColor {
        color: #999999;
    }

    .float_right {
        float: right;
    }

    .float_left {
        float: left;
    }

    .clear:after {
        content: '';
        display: block;
        clear: both;
    }

    #title {
        text-align: center;
        margin-bottom: 20px;
    }

</style>